<template>
  <div class="app-container">
    <el-card class="box-card">
      <h2 class="title">生成密钥</h2>
      <p class="subtitle">
        选择产品 (仅显示近期创建的10个，或者手动输入API ID)
      </p>

      <el-form :model="form" label-width="120px" class="form-container">
        <el-form-item label="产品">
          <el-select v-model="selected_product_id" placeholder="请选择产品" clearable @change="updateProductId"
            class="full-width">
            <el-option v-for="product in productList" :key="product.id" :label="product.name"
              :value="product.api_id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="API ID">
          <el-input v-model="form.product_api_id" placeholder="输入API ID" clearable class="full-width"></el-input>
        </el-form-item>

        <el-form-item label="密钥有效期">
          <el-select v-model="selectedDuration" placeholder="请选择时长" @change="handleDurationChange" class="full-width">
            <el-option :value="7" label="7 天"></el-option>
            <el-option :value="30" label="30 天"></el-option>
            <el-option :value="90" label="90 天"></el-option>
            <el-option :value="180" label="180 天"></el-option>
            <el-option :value="365" label="365 天"></el-option>
            <el-option :value="-1" label="自定义"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="selectedDuration === -1" label="自定义时长 (天)">
          <el-input v-model.number="customDuration" type="number" placeholder="输入天数" class="full-width"></el-input>
        </el-form-item>

        <el-form-item label="生成密钥的数量">
          <el-input v-model.number="form.amount" type="number" placeholder="输入数量" class="full-width"></el-input>
        </el-form-item>

        <el-form-item class="button-group">
          <el-button type="primary" @click="generateLicenseKeys">生成密钥</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getProductList } from "@/api/product";
import { generateLicense } from "@/api/license-key";

export default {
  name: "LicenseKeyGenerate",
  data() {
    return {
      productList: [],
      selected_product_id: null,
      selectedDuration: 30,
      customDuration: null,
      form: {
        product_api_id: "",
        amount: 1,
        duration: 30 * 24 * 60 * 60 * 1000,
      },
    };
  },
  methods: {
    fetchProducts() {
      getProductList(10)
        .then((response) => {
          this.productList = (response.data.products || []).sort((a, b) =>
            new Date(b.created_at) - new Date(a.created_at)
          );
        })
        .catch(() => {
          this.$message.error("获取产品列表失败");
        });
    },
    updateProductId(apiId) {
      this.form.product_api_id = apiId;
    },
    handleDurationChange() {
      if (this.selectedDuration !== -1) {
        this.form.duration = this.selectedDuration * 24 * 60 * 60 * 1000;
      }
    },
    async generateLicenseKeys() {
      if (!this.form.product_api_id) {
        this.$message.error("请选择产品或输入API ID");
        return;
      }
      if (!this.form.amount || this.form.amount <= 0) {
        this.$message.error("请输入有效的数量");
        return;
      }
      if (this.selectedDuration === -1) {
        if (!this.customDuration || this.customDuration <= 0) {
          this.$message.error("请输入有效的自定义时长");
          return;
        }
        this.form.duration = this.customDuration * 24 * 60 * 60 * 1000;
      }
      try {
        await generateLicense(this.form.amount, this.form.product_api_id, this.form.duration);
        this.$message.success("密钥生成成功！");
      } catch (error) {
        console.error("生成密钥失败:", error);
        this.$message.error("生成密钥失败");
      }
    },
  },
  mounted() {
    this.fetchProducts();
  },
};
</script>

<style scoped>
.app-container {
  max-width: 100%;
  margin: 50px auto;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.box-card {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.subtitle {
  color: #666;
  font-size: 14px;
}

.full-width {
  width: 100%;
}

.button-group {
  text-align: center;
}
</style>